import React from 'react';
import { useState } from 'react';
import Echarts from '../../../components/Echarts'
import Tu1 from '../../../components/echarts/Tu1';
import Tu2 from '../../../components/echarts/Tu2';
import Tu3 from '../../../components/echarts/Tu3';
import { Skeleton, } from 'antd';
import { useEffect } from 'react';
import '../../../style/stuecharts.scss'
import axios from 'axios'
function StudentEcharts(props) {
  var [datalist, setDatalist] = useState({})
  useEffect(() => {
    axios.get('/datalist').then((res) => {
      setDatalist(res.data)
    })
  }, [])
  // name是组件title，type是组件类型pie饼图
  var titlelist = { name: '各年级男女数量', type: ['bar', 'bar'] }
  return (
    <div className='studentecharts'>
      <div className="tu1" style={{ width: 800, height: 500 }}>
        <Tu1 />
      </div>
      <div className="tu2">
        {
          datalist.length ? <Echarts titlelist={titlelist} datalist={datalist} /> : <Skeleton active />
        }
      </div>
      <div className="tu3">
        <Tu2 />
      </div>
      <div className="guanxi" style={{ width: 600, height: 500 }}>
        <Tu3  />
      </div>
    </div>
  );
}

export default StudentEcharts;